<template>
  <div class="videoUrl-wrap">
    <div :style="'background-image: url(' +collection.videoUrl+');'" class="image" v-if="IsFormatImageVideo"></div>
    <template v-else>
      <video ref="videoUrl" :src="setat.blindBoxNFT.videoUrl" :imgUrl="setat.blindBoxNFT.imgUrl" :controls="false" autoplay playsinline muted webkit-playsinline loop class="vjs-big-play-centered">
        <source :src="setat.blindBoxNFT.videoUrl" type="videoUrl/mp4" />
      </video>
    </template>
  </div>
</template>  
<script >
import { defineComponent, ref, reactive, onMounted, computed, nextTick, onBeforeUnmount } from 'vue'
export default defineComponent({
  props: {
    collection: {
      type: Object
    }
  },
  setup(props) {
    const IsFormatImageVideo = computed(() => {
      const url = props.src
      if (url) {
        const images = ['jpg', 'png', 'jpeg']
        return images.indexOf(url.substring(url.lastIndexOf('.') + 1)) !== -1
      }
    })
    const videoUrl = ref()
    const setat = reactive({
      loading: false,
      blindBoxNFT: {
        imgUrl: "",
        videoUrl: "",
      },
    })
    const videoUrlXMLHttpRequest = (item) => {
      setat.blindBoxNFT.videoUrl = item
      const req = new XMLHttpRequest();
      req.open('get', item, true);
      req.responseType = 'blob';
      req.onload = function () {
        const videoUrlBlob = this.response;
        setat.blindBoxNFT.videoUrl = URL.createObjectURL(videoUrlBlob); // IE10+
        nextTick(() => {
          videoUrl.value.play()
          var count = 3;
          var times = setInterval(() => {
            count--;
            if (!videoUrl.value) return clearInterval(times)
            videoUrl.value.play()
            if (count <= 0) {
              clearInterval(times);
            }
          }, 500);
        })
      }
      req.send();
    }
    const handleVisiable = (e) => {
      switch (e.target.visibilityState) {
        case 'prerender':
          break;
        case 'hidden':
          videoUrl.value.pause();
          break;
        case 'visible':
          var count = 3;
          var times = setInterval(() => {
            count--;
            if (!videoUrl.value) return clearInterval(times)
            videoUrl.value.play()
            if (count <= 0) {
              clearInterval(times);
            }
          }, 500);
          break;
      }
    }
    onMounted(() => {
      if (!IsFormatImageVideo.value) {
        videoUrlXMLHttpRequest(props.collection)
        document.addEventListener('visibilitychange', handleVisiable)
      }
    })
    onBeforeUnmount(() => {
      if (!IsFormatImageVideo.value) {
        document.removeEventListener('visibilitychange', handleVisiable)
      }
    })
    return {
      videoUrl,
      setat,
      IsFormatImageVideo,

    }
  }
})
</script>
<style lang="less" scoped>
video {
  width: 100%;
}
// .videoUrl-wrap {
//   position: relative;
//   height: 334px;
//   max-width: 100%;
//   .image {
//     position: absolute;
//     left: 0;
//     right: 0;
//     width: 200px;
//     height: 200px;
//     margin: 70px auto 0 auto;
//     background-position: center;
//     background-size: contain;
//     border-radius: 20px;
//     border: 15px solid #29292b;
//   }
//   video {
//     position: relative;
//     width: 100%;
//     height: 100%;
//   }
//   &:after,
//   &:before {
//     content: '';
//     position: absolute;
//     left: 0;
//     right: 0;
//     background-position: center;
//     background-size: contain;
//     background-repeat: no-repeat;
//     z-index: 9;
//   }
//   &:before {
//     position: absolute;
//     top: 0;
//     height: 455px;
//     // background-image: url('~@/assets/image/image2.png');
//   }
//   &:after {
//     opacity: 0.7;
//     bottom: -30px;
//     height: 69px;
//     // background-image: url('~@/assets/image/image1.png');
//   }
// }
</style>